<template>
	<view>
		<view class="inputs_info">
			<view class="ipt">
				<input v-model="params.name" @confirm='inputs' class="inputs" confirm-type="search" type="text" placeholder="输入杂志名字" />
				<uni-icons type="search" size="24" color="#888888"></uni-icons>
			</view>
		</view>
		<swipergo :swiperid="swiperid" :upHeight="300" :upWith="716"></swipergo>
		<view class="tit">
			<view class="cont_flex1 page_width">
				<view class="flex_items" v-for="(item,index) in magazineList" :key="index" @click="goPage(item)">
					<image mode='scaleToFill' :src="item.image" ></image>
					<view class="text">{{item.name}}</view>
				</view>
			</view>
			<uni-load-more v-if="!magazineList.length <= 0" :status="statusshow"></uni-load-more>
		</view>
		<kong v-show="magazineList.length <= 0"></kong>
	</view>
</template>

<script>
import { getMagazineList} from '@/common/http.api.js';
	export default {
		data() {
			return {
				swiperid:4,
				params:{
					pageNum: 1,
					pageSize: 10,
					name:''
				},
				magazineList:[],
				statusshow:'loading'
			};
		},
		onLoad() {
			this.getList()
		},
		methods:{
			inputs(e){
				this.magazineList = []
				this.params.name = e.detail.value
				getMagazineList(this.params).then(res=>{
					this.magazineList.push(...res.rows)
				})
			},
			getList(){
				getMagazineList(this.params).then(res=>{
					this.magazineList.push(...res.rows)
					if(this.magazineList.length == res.total){
						this.statusshow = 'no-more'
					}
				})
			},
			onReachBottom(){
				this.params.pageNum ++ 
				this.getList()
			},
			goPage(item){
				uni.navigateTo({
					url:`/pages/index/magazines/magazinesList?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F0F0F1;
	}
	.swiper1 {
		width: 716rpx;
		margin: 20rpx auto;
		height: 300rpx;
	
		.swiper {
			width: 716rpx;
			height: 300rpx;
	
			.items_sw {
				width: 716rpx;
				height: 300rpx;
				border-radius: 20rpx;
	
				image {
					width: 100%;
					height: 300rpx;
					border-radius: 20rpx;
				}
			}
		}
	}
	
	
	.tit {
		.cont_flex1 {
			display: flex;
			margin: 10rpx auto;
			flex-wrap: wrap;
			justify-content: space-between;
			text-align: center;
			width: 100%;
			padding: 0 14rpx;
			box-sizing: border-box;
	
			.flex_items {
				width: 352rpx;
				height: 580rpx;
				background-color: #fff;
				margin-bottom: 28rpx;
				border-radius: 20rpx;
				padding: 22rpx;
				box-sizing: border-box;
	
				image {
					width: 308rpx;
					height: 472rpx;
				}
	
				.text {
					width: 308rpx;
					font-size: 32rpx;
					color: #000;
					line-height: 60rpx;
					white-space:nowrap;
					overflow:hidden;
				}
			}
		}
	}
</style>
